<template>
  <div>
    <van-nav-bar class="tenant-nav-bg" :title="title" />
    <!--    <van-pull-refresh v-model="loading" @refresh="onRefresh">-->
    <div class="tenant-list">
      <pull-refresh-list :language="language"  @pullScroller="pullScroller">
        <van-cell v-for="item in listData" is-link :title="item.name" :value="item.alias" :key="item.alias" @click="onCellClick(item)" />
        <van-empty v-if="!listData.length" :description="$t('userManagement.t1')" />
      </pull-refresh-list>
      <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" :cancel-text="$t('userManagement.t7')" />
    </div>
    <!--    </van-pull-refresh>-->
    <img src="../../assets/img/create.png" alt="" class="tenant-create-btn" @click="onCreate">
  </div>
</template>

<script>
import { NavBar, ActionSheet, Cell, PullRefresh, Empty  } from 'vant';
// import PullRefreshList from '../../components/PullRefreshList'

import {deleteUser, disableUser, enableUser, listUser, resetUser} from "../../api/user";
import configJs from "../../config";

export default {
  components: {
    [NavBar.name]: NavBar,
    [ActionSheet.name]: ActionSheet,
    // [PullRefresh.name]: PullRefresh,
    [Cell.name]: Cell,
    [Empty.name]: Empty,
    // PullRefreshList,
  },

  props: {
    title: String,
  },

  data() {
    return {
      listData: [],
      language: 'zh-cn',
      page: 1,
      show: false,
      loading: false,
      actions: [
        { name: this.$t('userManagement.t2'), color: '#ee0a24', callback: () => this.onDeleteUser()},
        { name: this.$t('userManagement.t3'), color: '#4293F4', callback: () => this.$router.push(`tenantManagement/add?type=modify&userName=${this.current.name}`)},
        { name: this.$t('userManagement.t4'), callback: () => this.onResetUser()},
        { name: this.$t('userManagement.t5'), callback: () => this.onEnableUser()},
        { name: this.$t('userManagement.t6'), callback: () => this.onDisableUser()},
      ]
    };
  },

  created() {
    this.language = configJs.language
    this.getListUser(0);
  },

  methods: {
    /**
     * 刷新
     */
    pullScroller(num) {
      // 刷新 0 加载 1
      console.log(num)
      if (num === 1) {
        this.page += 1
        this.getListUser(num)
      } else {
        this.page = 1
        this.getListUser(num)
      }
    },

    getListUser(type) {
      let self = this
      const params = {
        page: this.page,
        size: 10
      }
      listUser(self, params).then(response => {
        console.log(response.data)
        // this.listData = response.data.rows || [];
        if (type === 0) {
          this.listData = response.data.rows || []
        } else {
          this.listData = this.listData.concat(response.data.rows || [])
        }
      }).catch(function (error) {
        // console.log(error)
        return error
      })
    },

    onDeleteUser () {
      let self = this
      deleteUser(self, { userName: this.current.name }).then(response => {
        console.log(response.data)
        this.page = 1
        this.getListUser(0);
      }).catch(function (error) {
        // console.log(error)
        return error
      })
    },

    onResetUser () {
      let self = this
      resetUser(self, { userName: this.current.name }).then(response => {
        console.log(response.data)
      }).catch(function (error) {
        // console.log(error)
        return error
      })
    },

    onEnableUser () {
      let self = this
      enableUser(self, { userName: this.current.name }).then(response => {
        console.log(response.data)
      }).catch(function (error) {
        // console.log(error)
        return error
      })
    },

    onDisableUser () {
      let self = this
      disableUser(self, { userName: this.current.name }).then(response => {
        console.log(response.data)
      }).catch(function (error) {
        // console.log(error)
        return error
      })
    },

    onCellClick(item) {
      this.current = item
      this.show = true
    },

    onRefresh() {
      this.getListUser();
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },

    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
    },

    onCreate() {
      this.$router.push({path: '/tenantManagement/add?type=add'})
    }
  }
};
</script>

<style lang="less">
.tenant {
  &-nav-bg {
    box-shadow: 0 0 25px #cac6c6;
  }

  &-list {
    padding: 12px;
    height: 82vh;
    //.van-cell__left-icon, .van-cell__right-icon {
    //  height: 46px;
    //  font-size: 16px;
    //  line-height: 46px;
    //}
    .van-cell__value {
      text-align: left;
    }
  }

  &-create-btn {
    height: 50px;
    position: fixed;
    bottom: 66px;
    right: 10px;
  }
}
</style>
